<template>
  <div>
    <ul>
      <li
        class="list"
        v-for="film in films"
        :key="film.title"
        @click="handleDetail(film.title)"
      >
        <img :src="film.pic" />
        <div class="msg">
          <span class="title">{{ film.title }}</span>
          <span class="viewtype">2D</span>

          <div class="type">类型：{{ film.labels[2] }}</div>
          <div class="type">上映时间：{{ film.raiting }}</div>
        </div>
        <div class="bookings">预约</div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'nowPlaying',
  data() {
    return {
      films: [],
    }
  },
  created() {
    this.getfilms()
  },
  methods: {
    getfilms() {
      this.$http.get('/films/coming_soon').then((res) => {
        console.log(res.result)
        this.films = res.result
      })
    },
    handleDetail(title) {
      this.$router.push(`/film?url=coming_soon&title=${title}`)
    },
  },
}
</script>

<style>
.list {
  position: relative;
  height: 150px;
  width: 100%;
  background-color: #fff;
  border-bottom: 1px solid rgb(209, 207, 207);
  cursor: pointer;
}
.list img {
  position: absolute;
  top: 13px;
  left: 20px;
  height: 80%;
}
.msg {
  position: absolute;
  top: 31px;
  left: 125px;
}
.title {
  font-size: 18px;
}
.viewtype {
  display: inline-block;
  width: 25px;
  height: 16px;
  background-color: rgb(210, 214, 220);
  border-radius: 3px;
  font-size: 13px;
  padding: 1px 3px;
  box-sizing: border-box;
  color: #fff;
  margin: 5px;
}
.msg .type {
  color: rgb(104, 106, 107);
  margin: 5px 0;
}

.bookings {
  position: absolute;
  top: 57px;
  right: 24px;
  height: 29px;
  width: 58px;
  background-color: #fff;
  border: 1px solid rgb(255, 95, 22);
  line-height: 30px;
  text-align: center;
  border-radius: 3px;
  color: rgb(255, 95, 22);
}
</style>
